<template>
  <div class="">
    <el-form ref="Constant" :model="Constant" label-width="110px">
      <el-form-item label="步骤名称" prop="name">
        <el-input v-model="Constant.name"/>
      </el-form-item>
<!--      <el-form-item label="计算类型" prop="executeType">-->
<!--        <el-select v-model="Constant.calc_type" placeholder="请选择" style="width:100%">-->
<!--          <el-option-->
<!--            :key="'ADD'"-->
<!--            :label="'ADD'"-->
<!--            :value="'ADD'"-->
<!--          />-->
<!--          <el-option-->
<!--            :key="'SUBTRACT'"-->
<!--            :label="'SUBTRACT'"-->
<!--            :value="'SUBTRACT'"-->
<!--          />-->
<!--          <el-option-->
<!--            :key="'MULTIPLY'"-->
<!--            :label="'MULTIPLY'"-->
<!--            :value="'MULTIPLY'"-->
<!--          />-->
<!--          <el-option-->
<!--            :key="'DIVIDE'"-->
<!--            :label="'DIVIDE'"-->
<!--            :value="'DIVIDE'"-->
<!--          />-->
<!--        </el-select>-->
<!--      </el-form-item>-->
      <div class="box" title="字段" style="margin-top:20px;">
        <el-row>
          <template>
            <u-table ref="tableField" :table-data="Constant.fields" :table-header="columns" @removeObj="removeObj" @getStreamFieldOptions="getStreamFieldOptions"/>
            <el-row type="flex">
              <el-button class="el-table-add-row" icon="el-icon-plus" @click="addObj">
                添加
              </el-button>
              <div style="width: 20px"/>
              <el-button class="el-table-add-row" icon="el-icon-thumb" @click="getField">
                获取字段
              </el-button>
            </el-row>
          </template>
        </el-row>
      </div>
    </el-form>
    <div class="el-dialog__footer">
      <span class="dialog-footer">
        <el-button
          icon="el-icon-back"
          @click="cancel"
        >取消
        </el-button>
        <el-button
          type="primary"
          icon="el-icon-check"
          @click="handleSaveData()"
        >确定
        </el-button>
      </span>
    </div>
  </div>
</template>

<script>
import API from '../../../../../api/index'
import TableFileds from '../../../table/flink-table-fields.vue'
import mxgraph from '../../../../../graph/VueMxGraphLoader'
import xmlToFlinkJSON from '../../../../../utils/xmlToFlinkJson'

/* eslint-disable new-cap */
const {
  mxUtils,
  mxCodec
} = mxgraph
export default {
  name: 'Constant',
  components: {
    'u-table': TableFileds
  },
  props: {
    name: String
  },
  data() {
    return {
      graph: null,
      Constant: {
        type: 'Constant',
        name: '',
        fields: []
      },
      temp: {
        type: 'Constant',
        name: '',
        fields: []
      },
      columns: [
        { type: 'input', prop: 'column_name', label: '新增字段' },
        { type: 'select', prop: 'fieldType', label: '字段类型' },
        { type: 'input', prop: 'value', label: '常量设置值' }
      ]
    }
  },
  methods: {
    loadData(data) {
      if (data) {
        this.$forceUpdate()
        this.Constant = Object.assign({}, data)
      }
    },
    // 保存表单数据
    handleSaveData() {
      this.$emit('savePluginData', this.Constant)
      this.Constant = Object.assign({}, this.temp)
    },
    cancel() {
      this.$emit('cancel')
      this.Constant = Object.assign({}, this.temp)
    },
    // 重置表单数据
    resetFormData(stepname) {
      this.$forceUpdate()
      this.Constant.name = stepname
    },

    setGraph(val) {
      this.graph = val
    },
    addObj() {
      this.Constant.fields.push({})
      this.$nextTick(() => {
        const container = this.$el.querySelector('.el-table__body-wrapper')
        container.scrollTop = container.scrollHeight
      })
    },
    removeObj(index) {
      this.Constant.fields.splice(index, 1)
    },
    async getField() {
      const self = this
      self.Constant.fields = []
      const streamFields = await this.getStreamField()
      var tempFileds = []
      streamFields.data.data.data.fields.forEach(element => {
        const obj = {}
        obj.column_name = element.name
        obj.fieldType = this.columns.fieldType
        obj.value = '0'
        tempFileds.push(obj)
      })
      self.$set(self.Constant, 'fields', tempFileds)
    },
    async   getStreamField() {
      const value = await this.getXml()
      if (this.Constant.name) {
        return API.trans.flinkInputFields(value, { 'stepName': this.Constant.name })
      }
    },
    getXml() {
      this.saveTempPluginData(this.Constant)
      const graph = this.graph
      const enc = new mxCodec(mxUtils.createXmlDocument())
      const node = enc.encode(graph.getModel())
      const queryParJson = xmlToFlinkJSON.xmlToFlinkModels(node)
      queryParJson.models.model['step_name'] = this.Constant.name
      queryParJson.models.model['step_type'] = 'Constant'
      return queryParJson
    },
    async getStreamFieldOptions() {
      const result = await this.getStreamField()
      this.$refs['tableField'].setOptions(result)
    },
    saveTempPluginData(formData) {
      this.$emit('saveTempPluginData', formData)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.el-form-item {
  margin-bottom: 10px !important;
}
.box{
  position:relative;
  border:1px solid #dcdfe6;
  padding:30px 5px 10px 5px;
}
.box::before{
  content:attr(title);
  position:absolute;
  top: 0%;
  left:10%;
  transform:translateX(-50%);
  -webkit-transform:translate(-50%,-50%);
  padding:0px 10px;
  background-color:#fff;
}
</style>
